<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>测试layDate季度 & 联动</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<style>
			/*body {
				padding: 20px;
			}

			.demo-input {
				padding-left: 10px;
				height: 38px;
				min-width: 262px;
				line-height: 38px;
				border: 1px solid #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}

			.demo-footer {
				padding: 50px 0;
				color: #999;
				font-size: 14px;
			}

			.demo-footer a {
				padding: 0 5px;
				color: #01AAED;
			}*/
		</style>

		<script src="./jquery-1.11.1.min.js"></script>
		<!-- 改成你的路径 -->
		<script src="laydate/laydate.js"></script>
		<!-- 改成你的路径 -->
		<script src="../My97DatePicker/WdatePicker.js"></script>
		<link rel="stylesheet" href="laydateRepair.css" />
	</head>

	<body>
		<select id="selectedOption" class="demo-input dateSelector" name="degree" lay-filter="required" date-target="WORLD">
			<option value="d" selected>日</option>
			<option value="w">周</option>
			<option value="m">月</option>
			<option value="s">季</option>
			<option value="y">年</option>
		</select>
		<input id="worldId" type="text" readonly class="demo-input dateTargetWORLD" placeholder="请输入时间范围" />
		<input id="d121" class="Wdate" type="text" onfocus="WdatePicker({isShowWeek:true,onpicked:funccc(),errDealMode:3})" />
		<script>
			lay('#version').html('-v' + laydate.v);
			$Date = laydate;
			initDateForm();

			/**
			 * 季度初始化
			 * @param ohd 季度input dom对象非jquery对象
			 * @param sgl 有值单个，无值默认范围
			 */
			function renderSeasonDate(ohd, sgl) {
				var ele = $(ohd);
				$Date.render({
					elem: ohd,
					type: 'month',
					format: 'yyyy年M季度',
					range: sgl ? null : '~',
					min: "1900-1-1",
					max: "2099-12-31",
					btns: ['clear', 'confirm'],
					ready: function(value, date, endDate) {
						var hd = $("#layui-laydate" + ele.attr("lay-key"));
						if(hd.length > 0) {
							hd.click(function() {
								ren($(this));
							});
						}
						ren(hd);
					},
					done: function(value, date, endDate) {
						console.log(value, date, "季度")
						if(!isNull(date) && date.month > 0 && date.month < 5) {
							ele.attr("startDate", date.year + "-" + date.month);
						} else {
							ele.attr("startDate", "");
						}
						if(!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
							ele.attr("endDate", endDate.year + "-" + endDate.month)
						} else {
							ele.attr("endDate", "");
						}
					}
				});
				var ren = function(thiz) {
					var mls = thiz.find(".laydate-month-list");
					mls.each(function(i, e) {
						$(this).find("li").each(function(inx, ele) {
							var cx = ele.innerHTML;
							if(inx < 4) {
								ele.innerHTML = cx.replace(/月/g, "季度");
							} else {
								ele.style.display = "none";
							}
						});
					});
				}
			}
			/**
			 * 初始化表单中年季月日范围选择
			 * 下拉框与日期框对应：
			 *  <select class="dateSelector" date-target="PI" ...
			 *  <input type="text" class="dateTargetPI" readonly ...
			 *  PI为自定义的对应关键字
			 *
			 * @param form 要渲染的form的jquery对象，当form为空默认值为全页面
			 * @param sgl 有值单个，无值默认范围
			 */
			function initDateForm(sgl, form) {
				if(isNull(form)) form = $(document.body);
				var ltm = function(tar, tars, tva) {
					console.log(tar, tars, tva, "ttttttttttttt")
					tars.each(function() {
						$(this).removeAttr("lay-key");
						this.outerHTML = this.outerHTML;
					});
					tars = form.find(".dateTarget" + tar);
					tars.each(function() {
						var ele = $(this);
						if("y" == tva) {
							$Date.render({
								elem: this,
								type: 'year',
								format: 'yyyy年',
								done: function(value, date) {
									console.log(value, date, "年")

								}
							});

						} else if("s" == tva) {
							renderSeasonDate(this, 1);
						} else if("m" == tva) {
							ele.attr("startDate", "");
							ele.attr("endDate", "");
							$Date.render({
								elem: this,
								type: 'month',
								format: 'yyyy年MM月',
								done: function(value, date) {
									console.log(value, date, "月")
								}
							});
						} else if("d" == tva) {
							ele.attr("startDate", "");
							ele.attr("endDate", "");
							$Date.render({
								elem: this,
								format: 'yyyy年MM月dd日',
								done: function(value, date) {
									console.log(value, date, "日")
								}
							});
						} else if('w' == tva) {

						}
					});
				}
				var sels = form.find(".dateSelector");
				sels.each(function(i, e) {
					var ths = this;
					var thiz = $(e);
					var tar = thiz.attr("date-target");
					thiz.next().find("dd").click(function() {
						var tva = thiz.val();
						var tars = form.find(".dateTarget" + tar);
						ltm(tar, tars, tva);
					});
					thiz.change(function() {
						var tva = $(this).val();
						var tars = form.find(".dateTarget" + tar);
						ltm(tar, tars, tva);
					});
					var tars = form.find(".dateTarget" + tar);
					ltm(tar, tars, thiz.val());
				});
			}

			function isNull(s) {
				if(s == null || typeof(s) == "undefined" || s == "") return true;
				return false;
			}

			function getDateText() {
				var ele = $("#worldId");
				console.log(ele.val());
				console.log(ele.attr("startDate") + "," + ele.attr("endDate"));
			}
			/**
			 * WDatepicker插件
			 * */
			function createWdatePicker() {
				var type = $("#selType").val();
				WdatePicker({
					readOnly: true,
					dateFmt: 'yyyy - MM - dd',
					onpicked: pickTime,
					isShowWeek: true,
					maxDate: ' % y - % M - % d'
				});
			}
					/**
		    控件时间选中后，onpicked 事件对应的方法
		    根据不同的选择类型：日周月季年，计算最终选中的时间段
		*/
		function pickTime() {

			//			var type = $("#selType").combobox("getValue");
			var type = $("#selType").val();
			console.log(type, "日期")

			if(type == 1) { //按日
				//获取控件选择的时间，格式是根据设置的dateFmt : 'yyyy-MM-dd'
				var datetime = $dp.cal.getDateStr();
				$("#showstarttime").val(datetime + " 00:00:00");
				$("#showendtime").val(datetime + " 23:59:59");
			} else if(type == 2) { //按周

				var datetime = $dp.cal.getDateStr();

				console.log(datetime,"ddddddddd")
				//获取星期几，控件提供的方法
				var dstart = -$dp.cal.getP('w', 'w');
				var dend = dstart + 6;
				//计算一周的开始日期和结束日期，这个方法文档说返回的是字符串，但是实际中返回的是控件定义的时间对象，所以后面得自己转换成字符串
				var datestart = $dp.$DV(datetime, {
					d: dstart
				});
				var dateend = $dp.$DV(datetime, {
					d: dend
				});

				$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
				$("#showendtime").val(dateToString(dateend) + " 23:59:59");
			} else if(type == 3) { //按月
				var y = $dp.cal.getP('y', 'yyyy');
				var M = $dp.cal.getP('M', 'M');

				var d = new Date(y, M, 0);

				var datestart = {};
				datestart.y = y;
				datestart.M = M;
				datestart.d = 1;
				var dateend = {};
				dateend.y = y;
				dateend.M = M;
				//获取月的最后一天
				dateend.d = d.getDate();

				$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
				$("#showendtime").val(dateToString(dateend) + " 23:59:59");

			} else if(type == 4) { //按季
				var y = $dp.cal.getP('y', 'yyyy');
				var M = $dp.cal.getP('M', 'M');

				//计算季度的开始月份和结束月份
				var startM = parseInt((M - 1) / 3) * 3 + 1;
				var endM = startM + 2;

				var d = new Date(y, endM, 0);

				var datestart = {};
				datestart.y = y;
				datestart.M = startM;
				datestart.d = 1;
				var dateend = {};
				dateend.y = y;
				dateend.M = endM;
				//获取最后一个月的最后一天
				dateend.d = d.getDate();

				$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
				$("#showendtime").val(dateToString(dateend) + " 23:59:59");

			} else if(type == 5) { //按年

				var y = $dp.cal.getP('y', 'yyyy');
				//这里可以直接字符串拼凑写死，但是为了格式统一，还是创建对象在转化吧
				var datestart = {};
				datestart.y = y;
				datestart.M = 1;
				datestart.d = 1;
				var dateend = {};
				dateend.y = y;
				dateend.M = 12;
				dateend.d = 31;

				$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
				$("#showendtime").val(dateToString(dateend) + " 23:59:59");
			}

		};
		/**
		    控件返回的时间对象转换成字符串输出
		    控件的时间对象有y,M,d,H,m,s属性，分别返回年，月，日，时，分，秒
		*/
		function dateToString(date) {

			var strdate = "";
			strdate = strdate + date.y + "-";
			var M = date.M >= 10 ? date.M : ("0" + date.M);
			strdate = strdate + M;
			var d = date.d >= 10 ? date.d : ("0" + date.d);
			strdate = strdate + "-" + d;
			return strdate;
		};

		function funccc() {

			console.log($dp.$('d121').value,"vvvvvvvvv");
			$dp.$('d121').value = $dp.cal.getP('y') + "年" + $dp.cal.getP('W', 'WW') + "周";
			console.log($dp.$('d121').value,"aaaaaaaaaaaa")
		}
		</script>
	</body>

</html>
